<template>
	<view>
		<!-- 顶部区域 -->
	<view class="topArea"> 
			<!-- 轮播图 -->
		<swiper class="swiper" indicator-dots="true" indicator-active-color="#000" indicator-color="#fff" :autoplay="true" :interval="2000" :duration="500">
		                        <swiper-item v-for="item in swiperList" :key="item.id" class="swiper-item">							
										<img :src="item.img" alt="" >					
		                        </swiper-item>
		                     
		     </swiper>
			
			 </view> 
			 <!-- 搜索框 -->
			 <view class="search">
			 				 <view class="searchBox">
			 					 <icon type="search" size="18" class="icon" v-if="isShowIcon"/>
			 					 <input type="text" v-model="serachValue"  @focus="isShowIcon=false;serachValue=''" @blur="isShowIcon=true;serachValue='搜索你想要的车'">
			 				 </view>
			 				<button type="primary" class="searchBtn">搜索</button>
			 </view>
			 <!-- 汽车分类 -->
			<view class="carSort">
				 <view class="carItem" v-for="(item,index) in carNameList" :key="index">
					<view class="icon" 
					style="width: 80rpx;height: 80rpx;"
					>
					 <img :src="'../../static/images/chebiao/'+(index+1)+'.png'" alt="" >
					 </view>
					 <view class="name">{{item}}</view>
				 </view>
				 <!-- 分割线 -->
				 <view class="divideLine"></view>
			 </view>
			
			 <!-- 服务分类 -->
			 <view class="serviceSort">
				 <view class="serviceItem" v-for="item in serviceList" :key="item.id">
					<view class="icon" >
					 <img :src="item.url" alt="">
					</view>
					 <view class="name">{{item.name}}</view>
				 </view>
			 </view>
			 <view class="line32"></view>
			 
			 <!-- 每日好车推荐 -->
			<view class="navtitle mt32">
				 <b>每日好车推荐</b>
				 <b>{{currentIndex+1}}/3 </b>
			 </view>
			 <view class="scroll-List">
				  <swiper class="view" indicator-dots="true" indicator-active-color="#2f86f6" indicator-color="#ddd" autoplay="true" interval="3000" circular="true"
				  @change="changeSwiper">
				            <swiper-item v-for="item in todayCarList" :key="item.page">
								<CarList :dataList="item1" v-for="item1 in item.list" class="bs"/>
							</swiper-item>
				  </swiper >
			 </view>
			 
			 <!-- 同城服务 -->
			 <view class="title-box">
				 <view class="title">同城服务</view>
				  <view class="show-more">查看更多</view>
			 </view>
			 <view class="service-list">
				 <view class="goodsItem" v-for="item in goodsList" :key="item.id">
					<view class="pic"><img :src="item.cover" alt="" ></view>
					<view class="title" v-if="item.shop">{{item.shop.name}}</view>
					<view class="name">{{item.name}}</view>
					<view class="price">￥{{item.price}}</view>
				 </view>
			 </view>
			 
			 <!-- 猜你喜欢 -->
			 <view class="title-box">
				 <b style="font-size: 36rpx;">猜你喜欢</b>
			 </view>
			 <view class="loveCarList">
				 	<CarList :dataList="item" v-for="item in loveCarList" class="bottomBorder"/>
			 </view>
			 
			 <!-- 查看更多 -->
			 <view class="more">
				 <view><span>查看更多车源</span></view>
			 </view>
	</view>
</template>

<script>
	import CarList from '../../components/carList.vue'
	export default {
		data() {
			return {
				isShowIcon:true,
				carNameList:['大众','本田','别克','丰田','宝马','奔驰','奥迪','现代'],
				swiperList:[],
				serachValue:'搜索你想要的车',
				serviceList:[],
				todayCarList:[],
				currentIndex:0,
				goodsList:[],
				loveCarList:[]
			};
		},
		components:{CarList},
		created(){
			this.getSwiper()
			this.getService()
			this.getTodayCars()
			this.getGoodsList()
			this.getYourLoveCarList()
		},
		methods:{
			// 获取轮播图
			getSwiper(){
				this.myRequest({
					url:'/home/getSliders',
					method:'POST',
				}).then(res=>{
					this.swiperList=res.data.data
				})	
		},
		// 获取服务列表
		getService(){
			this.myRequest({
				url:'/getShopType'
			}).then(res=>{
				this.serviceList=res.data.data
			})
		},
		// 获取每日好车推荐列表
		getTodayCars(){
			this.myRequest({
				url:'/vc/getToadyCars',
				method:'POST'
			}).then(res=>{
				this.todayCarList=res.data.data
			})
		},
		changeSwiper(detail){
			this.currentIndex=detail.detail.current
		},
		// 获取同城服务列表
		getGoodsList(){
			this.myRequest({
				url:'/goods/randomGoods',
			}).then(res=>{
				this.goodsList=res.data.data
			})
		},
		
		// 获取猜你喜欢列表
		getYourLoveCarList(){
			this.myRequest({
				url:'/vc/getHomeCarList',
				method:'POST'
			}).then(res=>{
				this.loveCarList=res.data.data
			})
		}
		
	},
	}
</script>

<style lang="scss" scoped>
	// 顶部区域
	.topArea{
		position: relative;
		.swiper{
			height: 412rpx;
			.swiper-item {
				display: inline-block;
				width: 100%;
				height: 100%;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
		
	}
	// 搜索框
	.search{
		width: 100%;
		// position: absolute;
		// left: 0;
		// bottom: -80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.searchBox{
			display: flex;
			width: 0;
			height: 72rpx;
			flex-grow: 1;
			margin-left: 24rpx;
			padding:0 32rpx;
			 font-size: 28rpx;
			 color: #fff;
			  background: #fff;
			   box-shadow:0px 4px 20px 0px rgba(0,0,0,0.08);
			    border-radius:36rpx;
				.icon{
					display: flex;
					align-items: center;
					margin-right: 10rpx;
				}
			 input{
				 width: 100%;
				 height: 100%;
				 font-size: 28rpx;
				 color:#999;
			 }
		}
		.searchBtn{
			width: 156rpx;
			height: 72rpx;
			 border-radius: 36px;
			 margin: 0 32rpx;
			 display: flex;
			 align-items: center;
			 justify-content: center;
			  background: #FF3434;
			   color: #fff;
			   box-shadow:0px 4px 20px 0px rgba(255,52,52,0.2);
			    font-size: 32rpx;
		}
	}
	// 汽车分类
   .carSort{
	  margin-top: 20rpx;
	  padding: 0 72rpx;
	  // box-sizing: border-box;
	  background: #ffff;
	  display: flex;
	  align-items: center;
	  flex-wrap: wrap;
	  .carItem{
		  margin-top: 40rpx;
		  text-align: center;
		  margin-right: 95rpx;
		  .icon{
			  width: 80rpx;
			  height: 80rpx;
			  img{
				  width: 100%;
				  height: 100%;
			  }
		  }
		  
		  .name{
			    font-size:28rpx;
			    font-family:PingFangSC-Regular,PingFang SC;
			    color:#333;
			    line-height: 1;
			    margin-top: 12rpx;
			 
		  }
	  }
	  .carItem:nth-child(4n+4){
	    margin-right: 0;
	  }
   }
   // .swiper /deep/ .uni-swiper-dots-horizontal {
   //     bottom: 25px !important
   // }
   
   // 分割线
   .divideLine{
	 
	    width: 100%;
	    height: 1rpx;
	    margin-top: 40rpx;
	    background: #e6e6e6;
	 
   }
	   
   
   // 服务分类
   .serviceSort{
	   padding: 0 32rpx 40rpx;
	   background: #ffff;
	   display: flex;
	   align-items: center;
	   flex-wrap: wrap;
	   .serviceItem{
		   width: 96rpx;
		   text-align: center;
		   margin-right: 48rpx;
		   margin-top: 40rpx;
		   .icon{
		     width: 72rpx;
		     height: 72rpx;
		     margin: 0 auto;
			 img{
				 width: 100%;
				 height: 100%;
			 }
		   }
		   .name{
		     font-size: 24rpx;
		     font-family:PingFangSC-Regular,PingFang SC;
		     color:#333;
		     margin-top: 16rpx;
		     line-height: 1;
		   }
	   }
	   .serviceItem:nth-child(5n+5){
	     margin-right: 0;
	   }
   }
  
  .line32{
    height: 32rpx;
    background: #f7f7f7;
  }
  
  
  // 导航标题
  .navtitle{
	  height:118rpx;
	  line-height: 118rpx;
	  padding:0 34rpx;
	  font-size: 36rpx;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	 
	    font-size: 30rpx;
	   
	    b{
	      font-size: 36rpx;
	    }
	 
  }
  .mt32{
    margin-top: 32rpx;
  }
  
  .scroll-List{
	  .view{
		  width: 100%;
		  flex-direction: column;
		  flex-wrap: wrap;
		  height: 800rpx;
		  .item{
		  		padding: 20rpx;  
				margin: 0 33rpx 16rpx;
				display: flex;
				flex-grow: 1;
				flex-direction: row;
				box-shadow: 0px 0.533vw 2.667vw 0px rgba(0, 0, 0, 0.08);
				border-radius: 12rpx;
				.carInfo{
					padding-left: 20rpx;
					width: 350rpx;
					.carname{
						font-size: 32rpx;
						font-weight: bold;
						overflow: hidden;
						text-overflow: ellipsis;
						line-clamp: 2;
					}
					.carDetail{
						color: #999;
						font-size: 20rpx;
				}
		  }
		  }
	  } 
  }
  .title-box{ 
	  box-sizing: border-box;
     padding: 0 34rpx;
     height: 118rpx;
     display: flex;
     align-items: center;
     justify-content: space-between;
	 .title{
	   font-size:36rpx;
	   font-family:PingFangSC-Semibold,PingFang SC;
	   font-weight:600;
	   color:rgba(51,51,51,1);
	 }
	 .show-more{
	   font-size:28rpx;
	   font-family:PingFangSC-Regular,PingFang SC;
	   font-weight:400;
	   color:rgba(153,153,153,1);
	 }
	 }
	 .service-list{
	   box-sizing: border-box;
	   padding: 0 27rpx;
	   display: flex;
	   flex-wrap: wrap;
	   .goodsItem{
	     box-sizing: border-box;
	     width: 338rpx;
	     height: 432rpx;
	     padding: 22rpx 22rpx 14rpx;
	     border-radius: 16rpx;
	     background:rgba(255,255,255,1);
	     box-shadow:0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.08);
	     margin-right: 20rpx;
	     margin-bottom: 16rpx;
	     position: relative;
	     .pic{
	       box-sizing: border-box;
	       height: 194rpx;
	       background: #999;
	       border: 1rpx solid #f7f7f7;
		   img{
			   width: 100%;
			   height: 100%;
		   }
	     }
	     .title{
	       font-size:24rpx;
	       font-family:PingFangSC-Regular,PingFang SC;
	       line-height: 1;
	       color: #999;
	       overflow: hidden;
	       text-overflow: ellipsis;
	       white-space: nowrap;
	       margin-top: 16rpx;
	     }
	     .name{
	       font-size:32rpx;
	       font-family:PingFangSC-Medium,PingFang SC;
	       font-weight: bold;
	       color: #333;
	       line-height: 1.5;
	       margin-top: 12rpx;
	       text-overflow: -o-ellipsis-lastline;
	       overflow: hidden;
	       text-overflow: ellipsis;
	       display: -webkit-box;
	       -webkit-line-clamp: 2;
	       line-clamp: 2;
	       -webkit-box-orient: vertical
	     }
	     .price{
	       font-size:34rpx;
	       font-family:PingFangSC-Medium,PingFang SC;
	       line-height: 40rpx;
	       font-weight: bold;
	       color: #D52002;
	       margin-top: 16rpx;
	       position: absolute;
	       left: 22rpx;
	       bottom: 14rpx;
	     }
	   }
	   .goodsItem:nth-child(2n+2){
	     margin-right: 0;
	   }
	 }
	 .bs{
		 box-shadow:0px 4px 20px 0px rgba(0,0,0,0.08);
		 border-radius:16px;
	 }
		.bottomBorder{
			width: 100% !important;
			height: auto !important;
			padding: 40rpx 0 !important;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
			margin-bottom: 0!important;
		} 
		
		
		// 查看更多
		.more{
			width: 100%;
			height: 194rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			view{
				 border: 1px solid #A68761;
				 width: 356rpx;
				 height: 80rpx;
				 border-radius: 10rpx;
				 display: flex;
				 align-items: center;
				 justify-content: center;
				 span{
					 color: #CF691A;
					 font-size: 30rpx;
				 }
			}
		}

</style>
